<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta name="generator" content="HTML Tidy for Linux/x86 (vers 1st November 2003), see www.w3.org"/>
    <title>JavaScript: Performance Tips</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="copyright" content="Copyright &#169; 2005-2010 W3C (MIT, ERCIM, Keio)"/>
    <meta name="duration" content="5"/>
    <meta name="font-size-adjustment" content="-2"/>

    <link rel="stylesheet" href="styles/slidy.css" type="text/css"/>
    <link rel="stylesheet" href="styles/w3c-blue.css" type="text/css"/>
    <script type="text/javascript" src="scripts/slidy.js" charset="utf-8">//</script>

    <link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css"/>
    <script type="text/javascript" src="scripts/shCore.js"></script>
    <script type="text/javascript" src="scripts/shBrushJScript.js"></script>
    <script type="text/javascript" src="scripts/shBrushJava.js"></script>

    <link type="text/css" rel="stylesheet" href="styles/presentation.css"/>
    <script type="text/javascript" src="scripts/presentation.js"></script>
</head>


<body style="">
<div class="background">
    <img alt="" id="head-icon" src="graphics/icon-blue.png"/>
</div>

<div class="background slanty">
</div>

<div class="slide cover title">
    <img class="hidden" src="graphics/bullet.png" alt=""/>
    <img class="hidden" src="graphics/fold.gif" alt=""/>
    <img class="hidden" src="graphics/unfold.gif" alt=""/>
    <img class="hidden" src="graphics/fold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/nofold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/unfold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-fold.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-unfold.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-fold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-nofold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-unfold-dim.gif" alt=""/>

    <h1>JavaScript: Performance Tips</h1>

    <div style="position: absolute; bottom: 20px;">
        <p>Alex.Kolonitsky@gmail.com</p>

        <p>
            <a href="http://javascript-learning-courses.googlecode.com">http://javascript-learning-courses.googlecode.com</a>
        </p>
    </div>
</div>

<div class="slide">
    <h1>Performance Tips</h1>

    <ul>
        <li>DOM</li>
        <li>Modify DOM</li>
        <li>Modify Styles</li>
        <li>Cache</li>
        <li>JavaScript</li>
    </ul>
</div>

<div class="slide">
    <h1>Performance Tips</h1>

    <ul class="content">
        <li class="current">DOM</li>
        <li class="current">Modify DOM</li>
        <li class="current">Modify Styles</li>
        <li>Cache</li>
        <li>JavaScript</li>
    </ul>
</div>

<div class="slide">
    <h1>Repaint and Reflow</h1>

    <img src="graphics/Performance/render.png" alt="">
</div>

<div class="slide">
    <h1>Repaint</h1>

    <p>перерисовка страницы, происходить каждый раз когда меняется визуальное представление страницы. Это может быть выделение чего-то в рамку или изменение фона элемента, в таком случае будут пересованы и все внутренние элементы.</p>
</div>

<div class="slide">
    <h1>Reflow</h1>

    <p>более трудоемкая операция, возникает каждый раз когда происходит манипуляции с DOM деревом, применения стилей или ещё чего-нибудь что может повлиять на расположение элементов на странице. Это требует полного пересчета всех позиций внутренних и во многих случаях внешних элементов.</p>
</div>

<div class="slide">
    <h1>Modify DOM</h1>

    <ul>
        <li>Делать несколько изменений за один раз. В случае создания DOM фрагмента это значит, что мы полностью создаем элемент со всем контентом и только после этого добавляем его в дерево.</li>
    </ul>
</div>

<div class="slide">
    <h1>Modify DOM</h1>

    <ul>
        <li>
            Производить изменения над копией элемента, после чего заменять оригинал измененной копией
            <pre class="brush: js">
                var objCopy = obj.clone();
                ... work with objCopy ...
                obj.getParent().replace(obj, objCopy);
            </pre>
        </li>
        <li>Делать изменения над невидимыми элементами  (display: none)</li>
    </ul>
</div>

<div class="slide">
    <h1>Modify Styles</h1>

    <p>Аналогичное изменению DOM</p>
    <ul>
        <li>все (составные) изменения стилей выносить в css классы. Так, например, для подсветки элемента вы писали:
            <pre class="brush: js">
                elem.style.background = ‘white’
                elem.style.color = ‘black’
                elem.style.border = ‘1px solid red’
            </pre>
        </li>
    </ul>
</div>

<div class="slide">
    <h1>Modify Styles</h1>

    <ul>
        <li>теперь
            <pre class="brush: js">
                highlight {
                    background: white;
                    color: black;
                    border: 1px solid red;
                }

                elem.className = ‘highlight’;
            </pre>
        </li>
        <li>Вы также можете установить свойство style.cssText (или setAttribute(‘style’, …)) элемента, просто собрав в строку все нужные стили</li>
    </ul>
</div>


<div class="slide">
    <h1>Performance Tips</h1>

    <ul class="content">
        <li class="done">DOM</li>
        <li class="done">Modify DOM</li>
        <li class="done">Modify Styles</li>
        <li class="current">Cache</li>
        <li>JavaScript</li>
    </ul>
</div>

<div class="slide">
    <h1>Cache</h1>

    <p>Не кэшируются, полученные ‘тяжелыми мучениями’, значения</p>
    <pre class="brush: js">
        if (document.getElementById(‘id’).attr1) {
            document.getElementById(‘id’).attr2 = val2;
            document.getElementById(‘id’).attr3 = val3;
        }

        // или
        if ($(‘id’).attr1 && ($(‘id’).attr2 = val2)) {
            $('id').attr3 = val3;
        }
    </pre>
</div>

<div class="slide">
    <h1>Cache</h1>

    <p>$(‘…’) это поиск по дереву документа и хорошо бы кэшировать результат этого поиска в локальной переменной</p>
    <pre class="brush: js">
        var el = $(‘id’);
        if (el.attr1) {
            el.attr2 = val2;
            el.attr3 = val3;
        }
    </pre>
</div>

<div class="slide">
    <h1>Performance Tips</h1>

    <ul class="content">
        <li class="done">DOM</li>
        <li class="done">Modify DOM</li>
        <li class="done">Modify Styles</li>
        <li class="done">Cache</li>
        <li class="current">JavaScript</li>
    </ul>
</div>

<div class="slide">
    <h1>JavaScript</h1>

    <ul>
        <li>Eval</li>
        <li>Loops</li>
        <li>String</li>
        <li>RegExp</li>
    </ul>
</div>

<div class="slide">
    <h1>JavaScript: Eval</h1>

    <p>Никогда не используйте.</p>
</div>

<div class="slide">
    <h1>JavaScript: Loops</h1>

    <ul>
        <li>for-in</li>
        <li>length</li>
        <li>Extract static calculations</li>
    </ul>

    <p>
        <a href="http://dev.by/blog/32099">Заметки об оптимизации программ. Часть 1: о пользе Loop-invariant Code Motion</a>
    </p>
</div>

<div class="slide">
    <h1>JavaScript: String</h1>

    <pre class="brush: js">
        var res = “Hello, ” + herName + “, my name ”
                    + myName + “!!!”;
    </pre>

    <p>заменяем на </p>
    <pre class="brush: js">
        var res = [“Hello, ”, herName, “, my name ”,
                    myName, “!!!”].join(‘’);

        // или
        var res = "Hello, ";
        res += herName;
        res += ", my name";
    </pre>
</div>

<div class="slide">
    <h1>Нужно кэшировать</h1>

    <ul>
        <li>this.options.countrySelector.widget</li>
        <li>RegExp</li>
        <li>With</li>
        <li>try…catch</li>
    </ul>
</div>

<div class="slide">
    <h1>Links</h1>

    <ul>
        <li><a href="http://dev.opera.com/articles/view/efficient-javascript/">Efficient JavaScript</a></li>
        <li><a href="http://www.slideshare.net/madrobby/extreme-javascript-performance">Хорошая презентация</a></li>
        <li><a href="http://jsperf.com/">Место, где удобней всего проводить тесты производительности</a></li>
    </ul>
</div>


<div class="slide">
    <h1>Вопросы / Предложения</h1>

    <ul>
        <li>Alex.Kolonitsky@gmail.com</li>
        <li>akolonitsky@exadel.com</li>
        <li>Skype: Desargues_</li>
        <li>http://code.google.com/p/javascript-learning-courses/issues/list</li>
    </ul>
</div>

</body>
</html>

